<template>
   <div>
        <van-popup v-model="show" title="请选择支付方式" @close="close"  @open="open" :close-on-click-overlay="false" style="width: 100%;border-radius: 5px; height: 100vh; background-color: rgba(0,0,0,0)">
            <div class="content">
                <van-icon name="cross" class="icon" size="24px" @click.native="close"></van-icon>
                <div class="money">
                    <p class="title">订单支付</p>
                    <p class="price"><span>¥</span>&nbsp;<em>{{money|money}}</em></p>
                </div>
                <van-button type="primary" style="width: 80%; margin: 10px auto;" v-if="!showKeyboard" @click="submit">支付</van-button>
                <van-password-input
                    v-if="showKeyboard"
                    :value="value"
                    info="密码为 6 位数字"
                    @focus="showKeyboard = true"
                />
            </div>

            <van-number-keyboard
                :show="showKeyboard"
                @input="onInput"
                @delete="onDelete"
            />
            <!-- <div class="popHead">
                <van-icon name="cross" color="#666" size="18px" @click.native="close"></van-icon>
                <div class="name">请选择支付方式</div>
                <van-icon name="success" color="#666" size="18px" @click.native="success"></van-icon>
            </div>
            <van-radio-group v-model="radio">
                <van-cell-group>
                     <van-cell  v-for="item in payType" :title="item.picklistText">
                        <van-radio :name="item.picklistId" />
                    </van-cell>
                </van-cell-group>
            </van-radio-group> -->
        </van-popup>
   </div>
</template>

<script>
import md5 from 'js-md5';
export default {
    name: 'selectPayType',
    props: {
        show: {default: true},
        order: {},
        payId: {},
        payWayItem: {},
        money: {}
    },
    data() {
        return {
            popShow: false,
            value: '',
            showKeyboard: true,
        }
    },

    methods: {
        onInput(key) {
            this.value = (this.value + key).slice(0, 6);
            if (this.value.length === 6) {
                this.submit();
            }
        },
        onDelete() {
            this.value = this.value.slice(0, this.value.length - 1);
        },
        
        submit() {
            if (this.payWayItem.picklistId === 13) {
                this.$toast(`暂不支持${this.payWayItem.picklistText}`);
                return;
            }

            this.$http.post('/shop/orderPay/front/doOrderPay', {
                payId: this.payId,
                payType: this.payWayItem.picklistValue,
                payPwd: md5(this.value),
                openId: this.$store.state.userInfo.openId
            }).then(res => {
                if (res.status === 0) {
                    if (this.payWayItem.picklistId === 12) {
                        this.useWxPay(JSON.parse(res.data));
                    } else {
                        this.$toast.success('支付成功');
                        this.$emit('update:show', false);
                        this.$emit('paySuccess', this.payWayItem);
                    }
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },
        
        close() {
            this.$emit('update:show', false);
        },

        open() {
            // this.showKeyboard = !(this.payWayItem.picklistId === 12);
        },
        success() {
            // this.$emit('update:show', false);
            if (this.radio || this.radio == 0) {
                this.$emit('checked', payWayItem);
            }
        },

        useWxPay(data) {
            let self = this;
            function onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', Object.assign({"appId":"wx0f1080bae2ad5ced",}, data),
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            self.$toast.success('支付成功');
                            self.$emit('update:show', false);
                            self.$emit('paySuccess', this.payWayItem);
                        } 
                    }
                ); 
            }
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                onBridgeReady();
            }
        }
    },
    mounted() {
        if (this.order) {
            // this.getPayTypeList();
        }
    },
    watch: {
        'order'() {
            if (this.order !== '') {
                // this.getPayTypeList();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.content {
    padding: 15px 5px;
    width: 80%;
    margin: 30% auto;
    margin-bottom: 0;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    text-align: center;
    .icon {
        position: absolute;
        right: 15px;
        top: 15px;
    }
}
// .popHead {
//     display: flex;
//     align-items: center;
//     height: 50px;
//     padding: 0 15px;
//     justify-content: space-around;
//     .name {
//         flex: 1;
//         font-size: 16px;
//         text-align: center;
//     }
// }

.money {
    padding-top: 20px;
    text-align: center;
    .title {
        font-size: 14px;
        color: #999;
    }
    .price {
        margin: 10px 0 10px 0;
        span {
            font-size: 16px;
            vertical-align: baseline;
        }

        em {
            font-size: 40px;
        }
    }
}

.payType {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
    .chage {
        color: #1989fa;
    }
}

</style>
